import React, { useEffect, useState } from 'react'
import Son from './Son'

// 实例期
// 存在期
// state
// props
// 销毁期

// useEffect(callback, 依赖)


export default function Effect() {
    const [count, setCount] = useState(100)
    const [num, setNum] = useState(200)
    const [flag, setFlag] = useState(true)
    // 通过useEffect来模拟实例期  
    // useEffect(() => {
    //     console.log('实例期')
    // }, [])

    // 通过useEffect来模拟存在期
    // useEffect(() => {
    //     console.log('存在期---count逻辑')
    // }, [count])


    // useEffect(() => {
    //     console.log('存在期---num逻辑')
    // }, [num])

    // useEffect(() => {
    //     console.log('存在期---abc逻辑')
    // }, [])
    // 依赖可以写useState定义的值， props传递的值

    // 模拟销毁期
    // useEffect(() => {
    //     return () => {
    //         console.log('我被销毁了')
    //     }
    // })

    return (
        <div>
            {/* <div>
                {count}
                <button onClick={() => {
                    setCount(count + 1)
                }}>+++</button>
            </div>
            <br />
            <div>
                {num}
                <button onClick={() => {
                    setNum(num + 1)
                }}>+++</button>
            </div> */}



            {/* {count}
            <button onClick={() => {
                setCount(count + 1)
            }}>+++</button>
            <Son aaa={count} /> */}



            <button onClick={() => {
                setFlag(!flag)
            }}>取反</button>
            {
                flag ? <Son /> : ''
            }

        </div>
    )
}
